<script lang="ts" setup>
import { useTodos } from './common/useTodo'
import Rate from './components/Rate.vue'
import Rate2 from './components/Rate2.vue'
import Animation from './components/Animation.vue'
import { ref, reactive } from 'vue'
const { todoName, showInfo, todoList, add, clearTodo, allDone, activeLen } = useTodos()
const handleDel = (event, idx: number) => {
    animate.el = event
    animate.show = true
    todoList.value.splice(idx, 1)
}
let animate = reactive({
    show: false,
    el: null
})
const onBeforeEnter = (el) => {
    console.log('onBeforeEnter', el, animate.el)
    let rect = animate.el
    let x = window.innerWidth - rect.x - 60
    let y = rect.y - 80
    console.log(rect.x, rect.y)
    console.log(x, y)
    el.style.transform = `translate(-${x}px, ${y}px)`
}
const onEnter = (el, done) => {
    document.body.offsetHeight;
    el.style.transform = `translate(0,0)`;
    el.addEventListener('transitionend', done)
}
const onAfterEnter = (el) => {
    animate.show = false;
    el.style.display = 'none'
}

const count = ref(1)
const color = ref('red')
const addCount = () => {
    count.value += 1
    const numbers = Math.random()
    console.log('随机数为：', numbers)
    color.value = numbers > 0.5 ? 'blue' : 'red'
}

const rate2 = ref(1.4)
</script>
<template>
 <div class="warpper">
    <div class="input-box">
        <input type="text" v-model="todoName">
        <button @click="add">新增</button>
        <button @click="clearTodo">清理</button>
        <div class="del-files">🗑</div>
    </div>
    <transition name="model">
        <div v-if="showInfo" class="input-info">啥也没输入！</div>
    </transition>
    <div class="del-animation-warp">
        <transition @beforeEnter="onBeforeEnter" @enter="onEnter" @afterEnter="onAfterEnter">
            <div class="animate" v-show="animate.show">📋</div>
        </transition>
    </div>
    <div class="todo-list-box" >
        <template v-if="todoList.length > 0">
            <transition-group name="flip-list" tag="div">
                <div class="todo-item" v-for="(item, index) in todoList" :key="item.title">
                    <input type="checkbox" v-model="item.done">
                    <span class="title" :class="{done: item.done}">{{ item.title }}</span>
                    <span class="delete" @click="(e) => handleDel(e, index)">删除</span>
                </div>
            </transition-group>
        </template>
        <div v-else>暂无数据</div>

        <div class="check-content">
            全选<input type="checkbox" v-model="allDone">
            <span>{{ activeLen }}/ {{ todoList.length }}</span>
        </div>
    </div>
   
    <div class="gap-line">-------------这里是分割线---------------</div>
    <div>
        <h1 @click="addCount">{{ count }}</h1>
    </div>
    <div class="gap-line">-------------这里是分割线---------------</div>
    <h2>星星评级</h2>
    <div>描述相符：<Rate :value="3" theme="orange"></Rate></div>
    <div>物流服务：<Rate :value="5" theme="green"></Rate></div>
    <div>客服服务：<Rate :value="2" theme="yellow"></Rate></div>
    <div class="gap-line">-------------这里是分割线---------------</div>
    <h2>星星评级2</h2>
    <div><Rate2 v-model:value="rate2" theme="orange">描述相符：</Rate2></div>
    <div class="gap-line">-------------这里是分割线---------------</div>
    <h2>动画效果</h2>
    <Animation ></Animation>
    <div class="bottom-box"></div>
 </div>
</template>
<style scoped>
.warpper {
    padding: 0 50px;
}
.input-box {
    text-align: left;
    position: relative;
    /* background: Lavender; */
}
.del-files {
    position: absolute;
    right:10px;
    top:-7px;
    font-size: 30px;
}
.del-animation-warp .animate {
    position: fixed;
    right:64px;
    top: 73px;
    z-index: 100;
    transition: all .5s linear
}
.input-info {
    text-align: left;
    color: PaleVioletRed;
}
.model-enter-active, .model-leave-active {
    transition: all .3s ease;
}
.model-enter-from {
    opacity: 0;
    transform: translateY(-60px)
}
.model-leave-to {
    opacity: 0;
    transform: translateY(-60px)
}
.todo-list-box {
    margin-top: 30px;
    padding:30px 20px 0px;
    border: 1px solid #eeefff;
    text-align: left;
}
.todo-item {
    margin-bottom: 10px;
}
.todo-item .title {
    text-decoration: underline;

}
.todo-item .done {
    color:#999;
}
.todo-item .delete {
    cursor: pointer;
    margin-left:10px;
    font-size: 12px;
    color: red;
    text-decoration: none;
}
.flip-list-move {
    transition: transform .8s ease;
}
.flip-list-enter-active, .flip-list-leave-active {
    transition: all 1s ease;
}
.flip-list-enter-from, .flip-list-leave-to {
    opacity: 0;
    transform: translateX(30px)
}
.check-content {
    padding-top: 30px;
    text-align: center;
}
.gap-line {
    padding:20px 0;
}
h1 {
    color: v-bind(color)
}
.bottom-box {
    width: 100%;
    height: 900px;
}
</style>
